<template>
  <el-dialog
    :title="isEdit ? '编辑套餐' : '添加套餐'"
    v-model="dialogVisible"
    width="70%"
    @closed="$emit('closed')"
  >
    <div class="package-edit-container">
      <!-- 表单区域 -->
      <div class="form-area">
        <el-form :model="form" label-width="120px">
          <!-- VIP等级选择框 -->
          <el-form-item label="VIP等级">
            <el-select
              v-model="form.vip_level"
              placeholder="选择VIP等级"
              style="width: 100%"
              :disabled="!!currentSystemPackage"
            >
              <el-option
                v-for="vip in vipLevels"
                :key="vip.id"
                :label="vip.vip_name"
                :value="vip.id.toString()"
              />
            </el-select>
          </el-form-item>

          <!-- 系统类型选择框 -->
          <el-form-item label="系统类型">
            <el-select
              v-model="form.system_version"
              placeholder="请选择安卓版本"
              style="width: 100%"
              :loading="androidVersionsLoading"
              @visible-change="(val) => val && $emit('fetch-android-versions')"
              @focus="$emit('fetch-android-versions')"
              :disabled="!!currentSystemPackage"
            >
              <el-option
                v-for="version in androidVersions"
                :key="version.id"
                :label="version.android_name"
                :value="version.id.toString()"
              />
              <div
                v-if="
                  androidVersions.length < androidVersionTotal && !androidVersionsLoading
                "
                class="load-more"
                @click.stop="$emit('load-more-android-versions')"
              >
                加载更多
              </div>
              <div v-if="androidVersionsLoading" class="loading-text">加载中...</div>
              <div
                v-if="androidVersions.length === 0 && !androidVersionsLoading"
                class="empty-text"
              >
                暂无数据
              </div>
            </el-select>
          </el-form-item>

          <!-- 原有表单内容 -->
          <el-form-item label="套餐前缀">
            <el-input v-model="form.title" placeholder="请输入套餐名称" />
          </el-form-item>
          <el-form-item label="有效期(天)">
            <el-input-number v-model="form.day" :min="1" :precision="0" />
          </el-form-item>
          <el-form-item label="原价">
            <el-input-number
              v-model="form.origin_price"
              :min="0"
              :precision="0"
              :step="1"
              @change="(val) => (form.origin_price = parseInt(val))"
            />
          </el-form-item>
          <el-form-item label="促销标签">
            <el-input v-model="form.tag" placeholder="例如：批量购买低至￥1/台" />
          </el-form-item>
          <el-form-item label="活动名称">
            <el-input v-model="form.activate_name" placeholder="例如：买30送7（可选）" />
          </el-form-item>
          <el-form-item label="支持续费">
            <el-switch v-model="form.renew_display" />
          </el-form-item>

          <!-- 价格梯度设置 -->
          <price-tier-form v-model="form.price_tiers" />
        </el-form>
      </div>

      <!-- 预览区域 -->
      <package-preview
        :package-form="form"
        :vip-name="getSelectedVipName"
        :system-name="getSelectedSystemName"
      />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="$emit('save')">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from "vue";
import PriceTierForm from "./PriceTierForm.vue";
import PackagePreview from "./PackagePreview.vue";

// 定义props
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
  form: {
    type: Object,
    required: true,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
  currentSystemPackage: {
    type: Object,
    default: null,
  },
  vipLevels: {
    type: Array,
    default: () => [],
  },
  androidVersions: {
    type: Array,
    default: () => [],
  },
  androidVersionTotal: {
    type: Number,
    default: 0,
  },
  androidVersionsLoading: {
    type: Boolean,
    default: false,
  },
});

// 定义emits
const emit = defineEmits([
  "update:modelValue",
  "save",
  "closed",
  "fetch-android-versions",
  "load-more-android-versions",
]);

// 计算属性 - 对话框可见性
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
});

// 关闭对话框
const close = () => {
  dialogVisible.value = false;
};

// 获取当前选择的VIP等级名称
const getSelectedVipName = computed(() => {
  if (!props.form.vip_level) return "VIP";
  const selectedVip = props.vipLevels.find(
    (vip) => vip.id && vip.id.toString() === props.form.vip_level
  );
  return selectedVip?.vip_name || "VIP";
});

// 获取当前选择的系统名称
const getSelectedSystemName = computed(() => {
  if (!props.form.system_version) return "";
  const selectedVersion = props.androidVersions.find(
    (ver) => ver.id && ver.id.toString() === props.form.system_version
  );
  return selectedVersion ? selectedVersion.android_name : "";
});
</script>

<style lang="scss" scoped>
.package-edit-container {
  display: flex;
  gap: 20px;

  .form-area {
    flex: 1;
    max-width: 65%;
  }
}

.load-more {
  text-align: center;
  padding: 8px 0;
  color: #409eff;
  cursor: pointer;
  font-size: 14px;

  &:hover {
    background-color: #f5f7fa;
  }
}

.loading-text,
.empty-text {
  text-align: center;
  padding: 8px 0;
  color: #909399;
  font-size: 14px;
}
</style>
